<template>
  <div class="tabs-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 登录 -->
      <el-tab-pane label="登录" name="first">
        <BlogLogin @shareInfo="getFromLogin"></BlogLogin>
      </el-tab-pane>
      <!-- 注册 -->
      <el-tab-pane label="注册" name="second">
        <Register @shareActiveName="getActiveName"></Register>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Register from '@/components/Register'
import BlogLogin from '@/components/BlogLogin'

export default {
  name: 'Tabs',
  data () {
    return {
      activeName: 'first',
      newInfo: ''

    }
  },
  methods: {
    // 切换标签栏
    handleClick (tab, event) {
      // console.log(tab, event)
    },
    getActiveName (val) {
      this.activeName = val
    },
    // 接收BlogLogin组件传递的参数
    getFromLogin (val) {
      this.newInfo = val
      // console.log('Tabs组件的' + val)
      this.share(this.newInfo)
    },
    share (val) {
      this.$emit('shareNewInfo', val)
    }
  },
  components: {
    Register,
    BlogLogin
  }
}
</script>

<style lang="less" scoped></style>
